<template>
  <div class="exam-quiz-page">
    <!-- 使用统一的导航栏 -->
    <NavBar @toggle-sidebar="toggleSidebar" />

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载考试题目...</p>
      </div>

      <!-- 考试内容 -->
      <template v-else-if="questions.length > 0">
        <!-- 左侧考试区域 -->
        <div class="exam-area">
          <div class="exam-header">
            <h2 class="exam-title">{{ examTitle }}</h2>
            <div class="exam-tags">
              <span class="tag-type">{{ getQuestionTypeLabel(currentQuestion.type) }}</span>
              <span class="tag-difficulty">{{ getDifficultyLabel(currentQuestion.difficulty) }}</span>
            </div>
          </div>

          <div class="question-content">
            <div class="question-header">
              <h3 class="question-number">第<span>{{ currentQuestionIndex + 1 }}</span>题</h3>
              <span class="question-total">共<span>{{ totalQuestions }}</span>题</span>
            </div>

            <div class="question-text">
              {{ currentQuestion.content }}
            </div>

            <!-- 选择题选项 -->
            <div class="options-container" v-if="isChoiceQuestion(currentQuestion)">
              <div 
                v-for="(option, index) in currentQuestion.options" 
                :key="index"
                class="option-item"
                :class="{ 'selected': selectedAnswers[currentQuestion.questionId] === index }"
                @click="selectOption(index)"
              >
                <div class="option-radio" :class="{ 'checked': selectedAnswers[currentQuestion.questionId] === index }"></div>
                <span class="option-text">{{ option }}</span>
              </div>
            </div>

            <!-- 简答题输入框 -->
            <div v-else class="text-answer-container">
              <textarea 
                v-model="selectedAnswers[currentQuestion.questionId]"
                class="text-answer-input"
                placeholder="请输入您的答案..."
                rows="6"
                @input="updateTextAnswer"
              ></textarea>
            </div>

            <div class="navigation-buttons">
              <button 
                class="nav-btn prev-btn" 
                :disabled="currentQuestionIndex === 0"
                @click="goToPreviousQuestion"
              >
                上一题
              </button>
              <button 
                class="nav-btn next-btn"
                :disabled="currentQuestionIndex === totalQuestions - 1"
                @click="goToNextQuestion"
              >
                下一题
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧答题卡 -->
        <div class="answer-sheet">
          <h3 class="answer-sheet-title">答题卡</h3>
          
          <div class="question-grid">
            <div 
              v-for="(question, index) in questions" 
              :key="question.questionId"
              class="question-number-btn"
              :class="getQuestionStatus(index)"
              @click="goToQuestion(index)"
            >
              {{ index + 1 }}
            </div>
          </div>

          <div class="legend">
            <div class="legend-item">
              <div class="legend-color answered"></div>
              <span>已答题</span>
            </div>
            <div class="legend-item">
              <div class="legend-color current"></div>
              <span>当前题</span>
            </div>
            <div class="legend-item">
              <div class="legend-color unanswered"></div>
              <span>未答题</span>
            </div>
          </div>          <div class="progress-section">
            <h4 class="progress-title">答题进度</h4>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
            </div>
            <span class="progress-text">{{ answeredCount }}/{{ totalQuestions }} 题已完成</span>
          </div>

          <!-- 考试时间模块 -->
          <div class="exam-time-section">
            <h4 class="time-title">考试时间</h4>
            <div class="remaining-time-label">
              <span class="remaining-label">剩余时间</span>
            </div>
            <div class="remaining-time-display">
              <span class="time-text">{{ formattedRemainingTime }}</span>
            </div>
            <div class="total-time-display">
              <span class="total-time-text">考试总时长：{{ examDuration }}分钟</span>
            </div>
            <div class="time-progress-bar">
              <div class="time-progress-track"></div>
              <div class="time-progress-fill" :style="{ width: timeProgressPercentage + '%' }"></div>
            </div>
          </div>

          <div class="submit-section">
            <button class="submit-btn" @click="submitExam" :disabled="submitting || answeredCount === 0">
              {{ submitting ? '提交中...' : '提交考试' }}
            </button>
          </div>
        </div>
      </template>

      <!-- 无题目状态 -->
      <div v-else class="empty-state">
        <p>该考试暂无题目</p>
        <button class="back-btn" @click="goBackToExams">返回考试列表</button>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getExamQuestionsAPI, getExamDetailsAPI } from '../apis/examAPI/StudentExamsAPI'
import { submitBatchAnswersAPI } from '../apis/examAPI/StudentAnswersAPI'
import NavBar from "@/components/NavBar.vue"

const router = useRouter()
const route = useRoute()

// 切换侧边栏函数（NavBar需要）
const toggleSidebar = () => {
  // 这里可以添加侧边栏切换逻辑，或者留空
}

// 获取当前学生ID
const studentId = Number(localStorage.getItem('id') || '456') // 使用正确的localStorage键名

// 响应式数据
const questions = ref<Array<{ questionId: number; content: string; options?: string[]; type: number; difficulty?: string }>>([])

const currentQuestionIndex = ref(0)
const selectedAnswers = ref<Record<number, number | string>>({})
const loading = ref(false)
const submitting = ref(false)
const examTitle = ref('考试')
const examId = ref<number>(0)
const examDuration = ref<number>(0) // 考试总时长（分钟）
const remainingTime = ref<number>(0) // 剩余时间（秒）
const countdownInterval = ref<number | null>(null)

// 缓存相关
const CACHE_KEY = 'exam_answers_cache'

// 判断是否为选择题 - 根据type字段：1是简答题，2是选择题
const isChoiceQuestion = (question: any): boolean => {
  const isChoice = question.type === 1
  console.log('判断是否为选择题:', question.questionId, {
    type: question.type,
    isChoice,
    options: question.options
  })
  return isChoice
}

// 题目类型映射 - 根据type字段判断
const getQuestionTypeLabel = (type: number): string => {
  if (type === 1) {
    return '选择题'
  } else if (type === 2) {
    return '填空题'
  } else {
    return '简答题'
  }
}

// 难度映射 - 直接返回API返回的中文难度
const getDifficultyLabel = (difficulty?: string): string => {
  return difficulty || '普通'
}

// 计算属性
const totalQuestions = computed(() => questions.value.length)

const currentQuestion = computed(() => {
  return questions.value[currentQuestionIndex.value] || {}
})

const answeredCount = computed(() => {
  return Object.keys(selectedAnswers.value).filter(key => {
    const answer = selectedAnswers.value[Number(key)]
    return answer !== undefined && answer !== null && answer !== ''
  }).length
})

const progressPercentage = computed(() => {
  return totalQuestions.value > 0 ? (answeredCount.value / totalQuestions.value) * 100 : 0
})

// 格式化剩余时间显示 (HH:MM:SS)
const formattedRemainingTime = computed(() => {
  const totalSeconds = remainingTime.value
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60
  
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  } else {
    return `${minutes}:${seconds.toString().padStart(2, '0')}`
  }
})

// 计算时间进度百分比
const timeProgressPercentage = computed(() => {
  if (examDuration.value === 0) return 0
  const totalSeconds = examDuration.value * 60
  const usedSeconds = totalSeconds - remainingTime.value
  return Math.min((usedSeconds / totalSeconds) * 100, 100)
})

// 缓存答案
const saveAnswersToCache = () => {
  if (examId.value) {
    const cacheData = {
      examId: examId.value,
      answers: selectedAnswers.value,
      timestamp: Date.now()
    }
    localStorage.setItem(`${CACHE_KEY}_${examId.value}`, JSON.stringify(cacheData))
  }
}

// 从缓存加载答案
const loadAnswersFromCache = () => {
  if (examId.value) {
    const cached = localStorage.getItem(`${CACHE_KEY}_${examId.value}`)
    if (cached) {
      try {
        const cacheData = JSON.parse(cached)
        // 检查缓存是否过期（24小时）
        if (Date.now() - cacheData.timestamp < 24 * 60 * 60 * 1000) {
          selectedAnswers.value = cacheData.answers || {}
        }
      } catch (error) {
        console.error('加载缓存答案失败:', error)
      }
    }
  }
}

// 清除缓存
const clearAnswersCache = () => {
  if (examId.value) {
    localStorage.removeItem(`${CACHE_KEY}_${examId.value}`)
  }
}

// 获取考试详情
const fetchExamDetails = async () => {
  try {
    const response = await getExamDetailsAPI(examId.value)
    if (response.code === 200 && response.data) {
      examTitle.value = response.data.title || '考试'
      // 使用API返回的真实duration值
      examDuration.value = response.data.duration || 60
      
      // 计算实际剩余时间
      const now = new Date()
      const endTime = new Date(response.data.endTime)
      const startTime = new Date(response.data.startTime)
      
      // 检查考试是否在有效时间范围内
      if (now < startTime) {
        alert('考试尚未开始，请等待考试开始时间')
        router.push('/student-exam')
        return
      }
      
      if (now > endTime) {
        alert('考试已结束')
        router.push('/student-exam')
        return
      }
      
      // 设置剩余时间为考试总时长（以秒为单位）
      remainingTime.value = examDuration.value * 60
      
      // 启动倒计时
      startCountdown()
      
      console.log('获取考试详情成功:', {
        title: examTitle.value,
        duration: examDuration.value,
        remainingTime: remainingTime.value,
        startTime: response.data.startTime,
        endTime: response.data.endTime
      })
    } else {
      console.error('获取考试详情失败:', response.message)
      // 使用默认值
      examDuration.value = 60
      remainingTime.value = 60 * 60
      startCountdown()
    }
  } catch (error) {
    console.error('获取考试详情时出错:', error)
    // 使用默认值
    examDuration.value = 60
    remainingTime.value = 60 * 60
    startCountdown()
  }
}

// 启动倒计时
const startCountdown = () => {
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value)
  }
  
  countdownInterval.value = window.setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
    } else {
      // 时间到，自动提交
      clearInterval(countdownInterval.value!)
      alert('考试时间已到，系统将自动提交答案！')
      submitExam()
    }
  }, 1000)
}

// 停止倒计时
const stopCountdown = () => {
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value)
    countdownInterval.value = null
  }
}

// 获取考试题目
const fetchExamQuestions = async () => {
  try {
    loading.value = true
    
    const examIdParam = route.query.examId
    if (!examIdParam) {
      console.error('未找到考试ID')
      alert('未找到考试ID，请从考试列表重新进入')
      router.push('/student-exam')
      return
    }
    
    examId.value = Number(examIdParam)
    console.log('准备调用API，examId:', examId.value)
      // 添加更详细的调试信息
    console.log('调用API: /api/student/exams/' + examId.value + '/questions')
    
    const response = await getExamQuestionsAPI(examId.value)
    if (response.code === 200 && Array.isArray(response.data)) {
      questions.value = response.data.map(q => {
        // 处理options字段 - 针对选择题(type=2)处理options对象
        let options: string[] = []
        if (q.type === 1 && q.options) {
          if (typeof q.options === 'object' && q.options !== null) {
            // API返回的是对象格式: {"A": "AAA", "B": "BBB", "C": "CCC", "D": "DDD"}
            // 按字母顺序提取选项值
            const sortedKeys = Object.keys(q.options).sort()
            options = sortedKeys.map(key => `${key}. ${q.options[key]}`)
          }
        }
        
        return {
          questionId: q.questionId,
          content: q.content,
          options: options,
          type: q.type,
          difficulty: q.difficulty
        }
      })
      console.log('成功获取题目:', questions.value.length, '道题')
      console.log('题目详情:', questions.value)
        // 加载缓存的答案
      loadAnswersFromCache()
      
      // 获取考试详情并启动倒计时
      fetchExamDetails()
      
      // 如果API返回了考试标题，可以在这里设置
      // examTitle.value = response.examTitle || response.title || '考试'
    } else {
      console.error('获取题目失败 - API响应异常:', response)
      if (response.message) {
        alert('获取考试题目失败：' + response.message)
      } else {
        alert('获取考试题目失败：API返回数据格式异常')
      }
    }  } catch (error: any) {
    console.error('获取考试题目时出错:', error)
    console.error('错误详情:', {
      message: error?.message,
      stack: error?.stack,
      response: error?.response
    })
    
    // 根据错误类型给出更具体的提示
    if (error?.response) {
      // 服务器返回错误状态码
      const status = error.response.status
      if (status === 401) {
        alert('认证失败，请重新登录')
      } else if (status === 404) {
        alert('考试不存在或已被删除')
      } else if (status === 403) {
        alert('没有权限访问该考试')
      } else {
        alert(`服务器错误 (${status})：${error.response.data?.message || '请稍后重试'}`)
      }
    } else if (error?.request) {
      // 网络错误
      alert('网络连接失败，请检查网络后重试')
    } else {
      // 其他错误
      alert('获取考试题目失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 选择选项
const selectOption = (optionIndex: number) => {
  const questionId = currentQuestion.value.questionId
  selectedAnswers.value[questionId] = optionIndex
  saveAnswersToCache()
}

// 更新文本答案
const updateTextAnswer = () => {
  saveAnswersToCache()
}

// 跳转到指定题目
const goToQuestion = (questionIndex: number) => {
  currentQuestionIndex.value = questionIndex
}

// 上一题
const goToPreviousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

// 下一题
const goToNextQuestion = () => {
  if (currentQuestionIndex.value < totalQuestions.value - 1) {
    currentQuestionIndex.value++
  }
}

// 获取题目状态
const getQuestionStatus = (index: number) => {
  const question = questions.value[index]
  if (index === currentQuestionIndex.value) {
    return 'current'
  } else if (selectedAnswers.value.hasOwnProperty(question.questionId)) {
    const answer = selectedAnswers.value[question.questionId]
    if (answer !== undefined && answer !== null && answer !== '') {
      return 'answered'
    }
  }
  return 'unanswered'
}

// 格式化答案为API需要的格式
const formatAnswersForAPI = () => {
  const answers = []
  for (const [questionIdStr, answer] of Object.entries(selectedAnswers.value)) {
    const questionId = Number(questionIdStr)
    const question = questions.value.find(q => q.questionId === questionId)
    
    if (question && answer !== undefined && answer !== null && answer !== '') {
      if (isChoiceQuestion(question)) {
        // 选择题：从选项格式"A. AAA"中提取字母部分"A"
        const optionIndex = Number(answer)
        const optionText = question.options?.[optionIndex] || String(answer)
        // 提取选项字母，例如从"A. AAA"中提取"A"
        const optionLetter = optionText.split('.')[0] || optionText
        answers.push({
          questionId: questionId,
          answer: optionLetter
        })
      } else {
        // 简答题：直接使用文本答案
        answers.push({
          questionId: questionId,
          answer: String(answer)
        })
      }
    }
  }
  return answers
}

// 提交考试
const submitExam = async () => {
  if (answeredCount.value === 0) {
    alert('请至少回答一道题目')
    return
  }
  
  const unansweredCount = totalQuestions.value - answeredCount.value
  if (unansweredCount > 0) {
    const confirmSubmit = confirm(`还有 ${unansweredCount} 道题未作答，确定要提交吗？`)
    if (!confirmSubmit) return
  }
  
  try {
    submitting.value = true
    
    // 格式化答案
    const formattedAnswers = formatAnswersForAPI()
      // 调用批量提交答案API
    const response = await submitBatchAnswersAPI({
      studentId: studentId, // 使用动态获取的学生ID
      examId: examId.value,
      answers: formattedAnswers
    })
    
    if (response.code === 200) {
      alert('考试提交成功！')
      // 清除缓存
      clearAnswersCache()
      // 返回考试列表
      router.push('/student-exam')
    } else {
      alert('提交失败：' + response.message)
    }
  } catch (error) {
    console.error('提交考试失败:', error)
    alert('提交失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

// 返回考试列表
const goBackToExams = () => {
  router.push('/student-exam')
}

// 页面刷新前保存答案
const handleBeforeUnload = () => {
  saveAnswersToCache()
}

// 页面加载时获取数据
onMounted(() => {
  fetchExamQuestions()
  // 监听页面刷新
  window.addEventListener('beforeunload', handleBeforeUnload)
})

// 组件卸载时清理
onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload)
  saveAnswersToCache()
  // 停止倒计时
  stopCountdown()
})
</script>

<style scoped>
.exam-quiz-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: white;
  overflow-x: hidden;
}

/* 主内容区域 */
.main-content {
  position: relative;
  padding: 32px 24px;
  z-index: 5;
  max-width: 1272px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  box-sizing: border-box;
  margin-top: 64px; /* 为NavBar留出空间 */
}

/* 加载状态 */
.loading-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  color: #B3B3B3;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  color: #B3B3B3;
}

.back-btn {
  margin-top: 20px;
  padding: 12px 24px;
  background: #2C2C2C;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* 左侧考试区域 */
.exam-area {
  width: 873px;
  min-height: 638px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  padding: 33px;
  box-sizing: border-box;
}

.exam-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.exam-title {
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: #1E1E1E;
  margin: 0;
}

.exam-tags {
  display: flex;
  gap: 8px;
}

.tag-type, .tag-difficulty {
  padding: 4px 12px;
  border-radius: 22369600px;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #FFFFFF;
}

.tag-type {
  background: #3B82F6;
}

.tag-difficulty {
  background: #10B981;
}

.question-content {
  border-top: 0.67px solid #D9D9D9;
  padding-top: 24px;
}

.question-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 19px;
}

.question-number {
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: #2C2C2C;
  margin: 0;
}

.question-total {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #B3B3B3;
}

.question-text {
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #1E1E1E;
  margin-bottom: 24px;
  white-space: pre-line;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.option-item {
  width: 100%;
  min-height: 57px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item:hover {
  border-color: #3B82F6;
}

.option-item.selected {
  border-color: #3B82F6;
  background-color: #F0F9FF;
}

.option-radio {
  width: 24px;
  height: 24px;
  border: 2px solid #D9D9D9;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s;
}

.option-radio.checked {
  border-color: #3B82F6;
  background-color: #3B82F6;
}

.option-radio.checked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.option-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #2C2C2C;
  white-space: pre-line;
}

/* 简答题输入框 */
.text-answer-container {
  margin-bottom: 32px;
}

.text-answer-input {
  width: 100%;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.text-answer-input:focus {
  outline: none;
  border-color: #3B82F6;
}

.navigation-buttons {
  border-top: 0.67px solid #F1F5F9;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
}

.nav-btn {
  width: 96px;
  height: 48px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.prev-btn {
  background: #F1F5F9;
  color: #2C2C2C;
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.next-btn {
  background: #2C2C2C;
  color: #FFFFFF;
}

.next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* 右侧答题卡 */
.answer-sheet {
  width: 320px;
  min-height: 400px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  padding: 24px;
  box-sizing: border-box;
}

.answer-sheet-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: #1E1E1E;
  margin: 0 0 20px 0;
}

.question-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.question-number-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  transition: all 0.3s;
}

.question-number-btn.current {
  background: #3B82F6;
  border: 2px solid #3B82F6;
  color: #FFFFFF;
}

.question-number-btn.answered {
  background: #10B981;
  border: 2px solid #10B981;
  color: #FFFFFF;
}

.question-number-btn.unanswered {
  background: #FFFFFF;
  border: 2px solid #D9D9D9;
  color: #2C2C2C;
}

.question-number-btn:hover {
  transform: scale(1.1);
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.legend-color.answered {
  background: #10B981;
}

.legend-color.current {
  background: #3B82F6;
}

.legend-color.unanswered {
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
}

.legend-item span {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #2C2C2C;
}

.progress-section {
  border-top: 0.67px solid #F1F5F9;
  padding-top: 24px;
  margin-bottom: 24px;
}

.progress-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #B3B3B3;
  margin: 0 0 8px 0;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: 22369600px;
  margin-bottom: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #3B82F6;
  transition: width 0.3s ease;
}

.progress-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #B3B3B3;
}

.submit-section {
  border-top: 0.67px solid #F1F5F9;
  padding-top: 24px;
}

.submit-btn {
  width: 100%;
  height: 48px;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover:not(:disabled) {
  background: #DC2626;
}

.submit-btn:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 1300px) {
  .main-content {
    flex-direction: column;
    align-items: center;
  }
  
  .exam-area, .answer-sheet {
    width: 100%;
    max-width: 873px;
  }
}

/* 考试时间模块样式 */
.exam-time-section {
  border-top: 0.67px solid #F1F5F9;
  padding-top: 24px;
  margin-bottom: 24px;
}

.time-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #B3B3B3;
  margin: 0 0 16px 0;
}

.remaining-time-label {
  text-align: center;
  margin-bottom: 8px;
}

.remaining-label {
  color: #EF4444;
  font-size: 14px;
  font-family: Inter;
  font-weight: 500;
  line-height: 21px;
  word-wrap: break-word;
}

.remaining-time-display {
  text-align: center;
  margin-bottom: 12px;
}

.time-text {
  color: #10B981;
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 48px;
  word-wrap: break-word;
}

.total-time-display {
  text-align: center;
  margin-bottom: 16px;
}

.total-time-text {
  color: #B3B3B3;
  font-size: 14px;
  font-family: Inter;
  font-weight: 400;
  line-height: 21px;
  word-wrap: break-word;
}

.time-progress-bar {
  width: 100%;
  height: 8px;
  position: relative;
  background: #F1F5F9;
  border-radius: 22369600px;
  overflow: hidden;
}

.time-progress-track {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: 22369600px;
  position: absolute;
}

.time-progress-fill {
  height: 8px;
  background: #10B981;
  border-radius: 22369600px;
  position: absolute;
  transition: width 0.3s ease;
}
</style>